/<template>
  <div class="list">
    <Alert :show='show'>
      <div v-if="goods[index]">
        <img :src="goods[index].img" alt="">
        <h3>{{goods[index].title}}</h3>
      </div>
    </Alert>
    <dl v-for="(item,index) in goods" :key="item.id">
      <dt><img :src="item.img" alt="" @click="showAlert(index)"></dt>
      <dd>
        <h3>{{item.title}}</h3>
        <p>
          <b>{{item.price}}元</b>
          <span>已拼{{item.num|getWan}}件</span>
        </p>
      </dd>
    </dl>
  </div>
</template>

<script>
import axios from 'axios';
import Alert from './Alert'

export default {
  components:{
    Alert
  },
  data(){
    return{
      goods:[],
      show:false,
      index:0
    }
  },
  mounted(){
    axios.get('/goods').then(res=>{
      this.goods=res.data
    }),
    this.bus.$on('closeShow', () => {
      this.show=false
    })
  },
  filters:{
    getWan(value){
      if(value>=10000){
        return  (value/10000).toFixed(2)+'万'
      }else{
        return  value
      }
    }
  },
  methods:{
    showAlert(index){
      this.show=true,
      this.index=index
    }
  }
}
</script>

<style>
h3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
</style>